O browser exibe cada elemento de acordo com a natureza do elemento.
Se é um parágrafo, como num texto, ele inalgura uma nova linha abaixo, escreve o que foi solicitado.
Este é um exemplo de elemento tipo bloco...por sua natureza são separadores ou divisores de layout.

Mas se estamos exibindo um botão, se eu quiser exibir outro botão o correto seria um ao lado do outro. E é isso que o browser faz. Chamamos esses elementos de inline e são agrupados na mesma linha, se couberem.

No entanto, há ocasiões que desejamos alterar esse layout default do browser.

Estilo bloco

Se o estilo do elemento for em bloco e ao posicionar ele dentro da página já tiver um outro elemento a sua esquerda este será exibido na linha posterior.
Sempre que o elemento em bloco é exibido o próximo elemento será exibido na linha posterior.
Temos algum texto na linha e...

Este é o p1 com um estilo default(block).

Este é o p2 com um estilo default(block).

e este é um texto depois dos parágrafos.
Então antes de exibir o parágrafo o browser verifica se esta sendo exibido no início da linha. Se esta, sem problemas, renderiza o elemento. Mas se já existe algo à esquerda renderizado o parágrafo será movido para o inicio da linha de baixo.

Estilo bloco seguido pelo inline

Temos algum texto na linha e...

Este é o p1 com um estilo default(block).

Este é o p2 com um estilo inline.

e este é um texto depois dos parágrafos.
Nenhuma surpresa, o primeiro parágrafo foi exibido como um bloco e o segundo como um em linha.

Estilo bloco seguido pelo inline

Temos algum texto na linha e...

Este é o p1 com um estilo default(block).

Este é o p2 com um estilo inline.

Este é o p3 com um estilo inline.

e este é um texto depois dos parágrafos.
Nenhuma surpresa, o primeiro parágrafo foi exibido como um bloco e o segundo e terceiro como um em linha.

Estilo inline seguido pelo inline

Este é o p1 com um estilo inline.

Este é o p2 com um estilo inline.

Este é o p3 com um estilo inline.

Nenhuma surpresa, todos são inline e são exibidos na mesma linha.

Estilo inline seguido pelo block

Este é o p1 com um estilo inline.

Este é o p2 com um estilo block.

Nenhuma surpresa, antes de exibir o em bloco como existe um elemento à esquerda ele o coloca na próxima linha.


Portanto os elementos estilo inline serão exibidos uns a direita do outro se for possível
Os elementos em bloco são exibidos na mesma linha se na exibição coincidir com o início da linha ou serão exibidos na próxima linha se já existir algo à esquerda na mesma linha. Outro fato importante é que mesmo que haja espaço para renderizar o próximo elemento se o elemento anterior for tipo bloco o próximo elemento sempre será renderizado na próxima linha.

Testando em bloco em linha com divs

Note que as divs como os parágrafos são elementos, por default, em bloco

Estilo bloco

Estilo bloco seguido pelo inline

Importante : A Div2 deveria ter 100px de largura por 100px de altura (definidos pela css) mas o inline quebrou essa regra da css.

Estilo bloco seguido pelo inline-inline

Importante : A Div2 e Div3 deveriam ter 100px de largura por 100px de altura (definidos pela css) mas o inline quebrou essa regra da css. Isso se dá porque quando se colocar elementos inline cada um ocupará o espaço que precisa, nem mais nem menos .

Estilo inline seguido pelo estilo bloco

Como o o esperado ao exibir um elemento tipo bloco numa linha que já tinha elementos à esquerda a exibição foi feita na linha seguinte.